<template>
    <el-row class="left-container ">
        <el-menu  ref="elmenu"  background-color="#34495E" text-color="#fff" active-text-color="#fff"
                default-active="1" router
                class="el-menu-vertical">
            <template v-for="item in nav_list">
                <el-submenu :index="item.id+''" >
                    <template slot="title">
                        <i></i>
                        <span>{{item.name}}</span>
                    </template>
                    <template  v-if="item.sub" v-for="it in item.sub">
                        <el-menu-item :index="it.router">·&nbsp;&nbsp;&nbsp;{{it.name}}</el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>

    </el-row>
</template>
<script>
    import {navList,routes} from 'js/index_routes'
    export default{
      created(){
          this.nav_list=navList
          this.$bus.$on('listen-route-change',tits=>{
            if(tits.length==2){ //只有两层菜单才控制左边弹
                this.$refs.elmenu.openMenu(tits[0])
                this.$el.querySelectorAll('.el-menu-vertical.el-menu .el-submenu')[parseInt(tits[0])-1].querySelectorAll('ul li')[parseInt(tits[1])-1].click()
            }
          })
      },
      mounted(){

      },
      data(){
         return{
             nav_list:[],
         }
      },
      components:{

      },
      methods:{

      }
    }
</script>
<style lang="scss" scoped>
    .left-container{
        position:absolute;
        left:0;
        top:0;
        width:200px;
        min-height:100%;
        /*overflow-y:scroll;*/
        background:#34495E;
        font-size:16px;
        .el-menu-vertical{
            top:60px;
        }
    }

    .el-menu-vertical{
            i{
                display:inline-block;
                width:20px;
                height:20px;
            }
    }

    @for $i from 1 through 4{
       ul li:nth-child(#{$i}) i{
        background:url(./img/common_tab_icon_#{$i}.png) center no-repeat;
        background-size:contain;
       }
    }

</style>